﻿import QtQuick 2.7
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0
import QtQuick.Window 2.3

Item {
    id: mainWindow
    visible: true
    width: 300
    height: 200
    property real iW: 0.0
    Rectangle{
        id:parentId
        width: parent.width/2
        anchors.centerIn: parent
        height: 20
        color: "white"
        radius: 2
        border.color: "grey"
        onWidthChanged: {
            if(iW==1.0){
                childId.width = parentId.width-6
            }
        }
    }
    Rectangle{
        id:childId
        x:parentId.x+1
        width: parentId.width*iW
        height: 16
        anchors.verticalCenter: parentId.verticalCenter
        color:Qt.rgba(Math.random(),Math.random(),Math.random(),1.0)
        radius: 8
        PropertyAnimation { id: animation;
                            target: childId;
                            property: "width";
                            to: iW;
                            duration: 100;easing.type: Easing.OutQuad }
//        NumberAnimation on width { to: iW; duration: 200 ;easing.type: Easing.InQuad}
    }
    Timer{
        id:ti
        //interval: 400; running: true; repeat: true
        onTriggered:{
            if(iW >= parentId.width-6){
                ti.stop()
            }
            //childId.width = iW*100;
            iW += Math.random();
        }
    }
    Component.onCompleted: {
       // ti.start();
    }
    Button{
        id:btn
        anchors.bottom: parent.bottom
        width: 60
        height: 30
        text:"Click"
        onClicked: {
            //childId.width = iW;
            iW += Math.random();
            if(iW >= 1.0){
                iW = 1.0
                childId.width = parentId.width-6;
                return;
            }
            console.log("-----------iW-------"+iW)
        }
    }
}
